<template>
  <div
    class="model-box"
    :style="{top:top,right:right,width:modelW,height:modelH,backgroundImage:'url('+borderBg+')'}"
  >
    <div class="box-title">
      <span class="sp-title">{{title}}</span>
    </div>
    <el-table size="mini" class="custometable" :data="reportDatas.slice(0,5)">
      <!-- :row-style="tableRowStyle" :header-cell-style="tableHeaderColor" -->
      <!-- style="padding-right:100px;padding-left:100px;background-color:#000000;background-color:rgba(0,0,0,0.2);" -->
      <el-table-column
        fixed
        prop="reportTime"
        :show-overflow-tooltip="true"
        width="130px"
        label="上报时间"
      >
        <template slot-scope="scope">{{scope.row.reportTime | filterTime}}</template>
      </el-table-column>
      <el-table-column fixed prop="deviceName" :show-overflow-tooltip="true" label="上报设备"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { GetReportList } from "@/api/portalApi";
export default {
  name: "Latestreport",

  data() {
    return {
      isLoading: false,
      timer: null,
      reportDatas: [
        {
          reporttime: "2019-09-11 09:01",
          reportcontent: "新吴区 新丰苑社区 新丰苑一期 苏B·12345 驶出"
        },
        {
          reporttime: "2019-09-11 09:05",
          reportcontent: "新吴区 新丰苑社区 新丰苑二期 苏B·23456 驶出"
        },
        {
          reporttime: "2019-09-11 09:12",
          reportcontent: "新吴区 新丰苑社区 新丰苑三期 苏B·89005 驶出"
        },
        {
          reporttime: "2019-09-11 09:17",
          reportcontent: "新吴区 新丰苑社区 新丰苑一期 苏B·33214 驶出"
        },
        {
          reporttime: "2019-09-11 09:20",
          reportcontent: "新吴区 新丰苑社区 新丰苑二期 苏B·89002 驶出"
        }
      ],
      borderBg: require("@/assets/images/bg_info.png")
    };
  },
  props: {
    modelW: {
      type: String,
      default: "25.5rem"
    },
    modelH: {
      type: String,
      default: "14.8rem"
    },
    top: {
      type: String,
      default: "50%"
    },
    right: {
      type: String,
      default: "1.5rem"
    },
    title: {
      type: String,
      default: "最新上报信息"
    },
    id: {
      type: [String, Number, Object]
    },
    leader: {
      type: String,
      default: ""
    }
  },
  mounted() {
    this.getReportList();
  },
  created() {},
  watch: {
    leader: function() {
      this.getReportList();
    }
  },
  methods: {
    async getReportList() {
      try {
        let params = {
          placeId: this.$storage.get('place').leader
        };
        this.stop();
        if (this.id) {
          Object.assign(params, { id: this.id });
        }
        let reportList = await GetReportList(params);
        // reportList.rows.reverse();
        let arr = []
        for (const key in reportList.data) {
          if (reportList.data.hasOwnProperty(key)) {
            const element = reportList.data[key];
            arr.push({
              ...element,
              key
            })
            
          }
        }
        this.reportDatas = arr;
        if (this.reportDatas.length > 0) {
          this.play();
        }
      } catch (error) {
        console.log(error);
      }
    },
    change() {
      //change、paly表格数据动态滚动
      this.reportDatas.push(this.reportDatas[0]); //把第一条数据插入数组最有一条
      this.reportDatas.shift(); //删除数组中第一条数据
    },
    play() {
      this.timer = setInterval(this.change, 2000); //每两秒执行一次插入删除操作
    },
    stop() {
      clearInterval(this.timer);
    }
  }
};
</script>
<style lang="less" scoped>
.model-box {
  position: absolute;
  z-index: 1000;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  .box-title {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    color: #333;
    position: relative;
    .sp-title {
      color: #e9e9e9;
      margin: 0px 0px 4px 0px;
      font-size: 18px;
    }
  }
}

</style>